<script setup lang="ts" name="AddBankCard">
import type { FieldRule } from 'vant'
const mobileRules: FieldRule[] = [
  { required: true, message: '请输入手机号' },
  { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
]
const validator = (val) => {
    return  /1\d{10}/.test(val);
}
const data:any = reactive({
    addBankForm:{
        cardName:"",
        accountName:''
    },
});

const {addBankForm
} = toRefs(data); 
 const onSubmit = (values) => {
      console.log('submit', values);
    };

</script>
<template>
    <DetailHeader :title="'添加银行卡'" :isNeedBackIcon="true" />
    <div class="addBankCardPage">
        <van-form @submit="onSubmit" label-align="top" :v-model="addBankForm">
            <van-cell-group >
                <van-field
                v-model="addBankForm.cardName"
                class="myfield"
                name="银行名"
                label="银行名"
                required 
                placeholder="银行名"
                :rules="mobileRules"
                />
                <van-field
                required 
                v-model="addBankForm.accountName"
                name="账户名称"
                label="账户名称"
                placeholder="账户名称"
                :rules="[{ required: true, message: '请填写账户名称' }]"
                />
                <van-field
                required 
                v-model="addBankForm.accountName"
                name="IFSC 码"
                label="*IFSC 码"
                placeholder="*IFSC 码"
                :rules="[{ required: true, message: '请填写*IFS 码' }]"
                />
                <van-field
                required 
                v-model="addBankForm.accountName"
                name="帐号"
                label="帐号"
                placeholder="帐号"
                :rules="[{ required: true, message: '请填写帐号' }]"
                />
                <van-field
                required 
                v-model="addBankForm.accountName"
                name="再次确认帐号"
                label="再次确认帐号"
                placeholder="再次确认帐号"
                :rules="[{ required: true, message: '请填写帐号' }]"
                />
                <van-field
                required 
                v-model="addBankForm.accountName"
                name="UPI ID"
                label="UPI ID"
                placeholder="UPI ID"
                :rules="[{ required: true, message: '请填写UPI ID' }]"
                />
                <van-field
                required 
                v-model="addBankForm.accountName"
                name="再次确认UPI ID"
                label="再次确认UPI ID"
                placeholder="再次确认UPI ID"
                :rules="[{ required: true, message: '请填写再次确认UPI ID' }]"
                />
                <van-field
                required 
                v-model="addBankForm.accountName"
                name="电子邮箱"
                label="电子邮箱"
                placeholder="电子邮箱"
                :rules="[{ required: true, message: '请填写电子邮箱' }]"
                />
                <van-field
                required 
                v-model="addBankForm.accountName"
                name="PAN 码"
                label="PAN 码"
                placeholder="PAN 码"
                :rules="[{ required: true, message: '请填写PAN 码' }]"
                />
                <div class="enterPwd">

                        <van-field
                        class="confirmPwd"
                        required 
                        v-model="addBankForm.accountName"
                        name=""
                        placeholder="请输入一次性密码"
                        :rules="[{ required: true, message: '请请输入一次性密码' }]"
                        />
                        <div class="confirmBtn">请求一次性密码</div>
                </div>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                确认
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
